<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/4/26
  Time: 13:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="inc/inc_head.jsp"%>
<%@include file="inc/comm.jsp"%>
<html>
<head>
  <title></title>
  <link href="${ctx}/resources/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="${ctx}/resources/css/font-awesome.min.css" />
  <link rel="stylesheet" href="${ctx}/resources/css/font-awesome-ie7.min.css" />

  <link rel="stylesheet" href="${ctx}/resources/css/dropzone.css" />

  <%--<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />--%>

  <link rel="stylesheet" href="${ctx}/resources/css/ace.min.css" />
  <link rel="stylesheet" href="${ctx}/resources/css/ace-rtl.min.css" />
  <link rel="stylesheet" href="${ctx}/resources/css/ace-skins.min.css" />

  <link rel="stylesheet" href="${ctx}/resources/css/ace-ie.min.css" />

  <script src="${ctx}/resources/js/ace-extra.min.js"></script>

</head>
<body>
<%--<form action="${ctx}/" name="form" method="post" enctype="multipart/form-data">--%>
<%--<input type="file" value="上传文件"/>--%>
<%--<input type="hidden" name="second" value="${secondId}"/>--%>
<%--<input type="hidden" name="parent" value="${parentId}"/>--%>
<%--<input value="确定" type="submit">--%>
<%--</form>--%>

<div class="page-content">

  <div class="row">
    <div class="col-xs-12">
      <!-- PAGE CONTENT BEGINS -->

      <div class="alert alert-info">
        <i class="icon-hand-right"></i>

        请上传对应该菜单的文件(只能上传一个)<h2 style="color: slateblue"><i class="fa fa-clock-o fa-spin"></i>此文件作为菜单的链接</h2>
        <button class="close" data-dismiss="alert">
          <i class="icon-remove"></i>
        </button>
      </div>
      <div id="dropzone">
        <form action="${ctx}/upload/file" class="dropzone" method="post" enctype="multipart/form-data">
          <div class="fallback" style="display: none">
            <input name="file" type="file" multiple="multiple" />
          </div>
        </form>
      </div>
        <div style=" position: relative; float:left; width:400px;">
      <input type="button" id="sureSubmit" class="btn-info" value="上传"  style=" position: relative; float:left;margin-right:10px;"/>
      <input type="button" id="another" value="上传附件" onclick="uploadanther(this)" style=" position: relative; float:left;margin-right:10px;"/>
      <input type="button" id="done" onclick="done(this)" value="完成" style=" position: relative; float:left;margin-right:10px;"/>
      <input type="hidden" id="filename" />
     </div>
      <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
  </div><!-- /.row -->
</div><!-- /.page-content -->

</body>
<script type="text/javascript">
  $('#another').css('display','none');
  $('#done').css('display','none');
  $(function(){
    try {
      $(".dropzone").dropzone({
        url: "${ctx}/upload/main?parentId=${parentId}&secondId=${secondId}&thirdId=${thirdId}",
        maxFiles: 1,
        autoDiscover:false,
        maxFilesize: 512000000,
        paramName: "file", // The name that will be used to transfer the file
        addRemoveLinks : true,
        autoProcessQueue: false,//不自动上传
//        parallelUploads:50,
//        uploadMultiple:true,
//        dictCancelUploadConfirmation:'你确定要取消上传吗？',
        dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="fa fa-share"></i> 拖拽</span> 上传 \
              <span class="smaller-80 grey">(或者点击上传)</span> <br /> \
              '
        ,
        dictMaxFilesExceeded:'只能上传一个文件',
        dictResponseError: 'Error while uploading file!',
        acceptedFiles:'.html,.jsp,.jpg,.JPEG,.txt,.css,.js,.woff,.png,.svg,.pdf',
        init: function() {
          //手动上传
          var submitButton = document.querySelector("#sureSubmit");
          myDropzone=this; // closure
          //为上传按钮添加点击事件
          submitButton.addEventListener("click", function () {
            myDropzone.processQueue();
          });

          this.on("success", function (file) {
            console.log("File " + file.name + "uploaded");
            var filename=file.name;
            $('#filename').val(filename);

            $('#another').css('display','block');
            $('#another').addClass('btn-info');
            $('#done').addClass('btn-info');
            $('#done').css('display','block');

//            if(file.name.lastIndexOf('.woff')<0){
            <%--window.parent.$("#content").attr("src",'${ctx}/resources/upload/${parentId}/${secondId}/${thirdId}/'+file.name);--%>
            <%--window.parent.$("#${parentId}${secondId}${thirdId}").attr("href",'${ctx}/resources/upload/${parentId}/${secondId}/${thirdId}/'+file.name);--%>
//            }
//            window.parent.location.reload(true);
          });
          this.on("removedfile", function(file) {
            console.log("File " + file.name + "removed");
          });
        }
        //change the previewTemplate to use Bootstrap progress bars
//        previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
      });
    } catch(e) {
      alert('Dropzone.js does not support older browsers!');
    }
    <%--window.location.href='${ctx}/index';--%>
  });


  function done(obj){
    var filename=$('#filename').val();
    window.parent.$("#content").attr("src",'${ctx}/resources/upload/${parentId}/${secondId}/${thirdId}/'+filename);
    window.parent.$("#${parentId}${secondId}${thirdId}").attr("href",'${ctx}/resources/upload/${parentId}/${secondId}/${thirdId}/'+filename);
  }


  function uploadanther(obj){
    var another=$('#filename').val();
    window.location.href='${ctx}/upload/another?parentId=${parentId}&secondId=${secondId}&thirdId=${thirdId}&filename='+another;
  }

</script>
<script src="${ctx}/resources/js/bootstrap.min.js"></script>
<script src="${ctx}/resources/js/typeahead-bs2.min.js"></script>

<!-- page specific plugin scripts -->

<script src="${ctx}/resources/js/dropzone.min.js"></script>

<!-- ace scripts -->

<script src="${ctx}/resources/js/ace-elements.min.js"></script>
<script src="${ctx}/resources/js/ace.min.js"></script>

</html>
